<template>
  <div class="feedback-container">
    <el-card class="feedback-card">
      <div slot="header" class="card-header">
        <span>我的反馈</span>
        <el-button type="primary" size="small" @click="showCreateDialog">
          提交反馈
        </el-button>
      </div>

      <!-- 反馈列表 -->
      <el-timeline>
        <el-timeline-item
          v-for="feedback in feedbacks"
          :key="feedback.id"
          :timestamp="formatTime(feedback.createdAt)"
          :type="getStatusType(feedback.status)"
        >
          <el-card class="feedback-item">
            <div class="feedback-content">{{ feedback.content }}</div>
            
            <!-- 反馈图片 -->
            <el-image 
              v-if="feedback.imageUrl"
              :src="`/api/file/get/${feedback.imageUrl}`"
              :preview-src-list="[`/api/file/get/${feedback.imageUrl}`]"
              class="feedback-image"
            ></el-image>

            <!-- 管理员回复 -->
            <div v-if="feedback.reply" class="reply-section">
              <div class="reply-header">
                <i class="el-icon-s-custom"></i>
                <span>管理员回复</span>
                <span class="reply-time">{{ formatTime(feedback.repliedAt) }}</span>
              </div>
              <div class="reply-content">{{ feedback.reply }}</div>
            </div>

            <!-- 状态标签 -->
            <div class="feedback-status">
              <el-tag :type="getStatusTagType(feedback.status)">
                {{ getStatusText(feedback.status) }}
              </el-tag>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>

      <!-- 无数据提示 -->
      <div v-if="feedbacks.length === 0" class="no-data">
        暂无反馈记录
      </div>
    </el-card>

    <!-- 提交反馈对话框 -->
    <el-dialog title="提交反馈" :visible.sync="dialogVisible" width="500px">
      <el-form :model="feedbackForm" :rules="rules" ref="feedbackForm">
        <el-form-item prop="content" label="反馈内容">
          <el-input
            type="textarea"
            v-model="feedbackForm.content"
            :rows="4"
            placeholder="请描述您的问题或建议..."
            :maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="上传图片">
          <el-upload
            class="upload-demo"
            action="/api/file/upload"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
            :before-upload="beforeUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>

          <!-- 图片预览 -->
          <div v-if="feedbackForm.imageUrl" class="preview-image">
            <el-image 
              :src="`/api/file/get/${feedbackForm.imageUrl}`"
              class="upload-preview"
            ></el-image>
            <i class="el-icon-delete" @click="removeImage"></i>
          </div>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFeedback" :loading="submitting">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatTime } from '@/utils/time'
import request from '@/utils/request'

export default {
  name: 'FeedbackList',
  data() {
    return {
      feedbacks: [],
      dialogVisible: false,
      submitting: false,
      feedbackForm: {
        content: '',
        imageUrl: ''
      },
      rules: {
        content: [
          { required: true, message: '请输入反馈内容', trigger: 'blur' },
          { min: 5, message: '反馈内容不能少于5个字', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchFeedbacks()
  },
  methods: {
    formatTime,
    async fetchFeedbacks() {
      try {
        const res = await request.get('/api/feedbacks')
        this.feedbacks = res.data
      } catch (error) {
        this.$message.error('获取反馈列表失败')
      }
    },
    showCreateDialog() {
      this.dialogVisible = true
      this.feedbackForm = { content: '', imageUrl: '' }
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    handleUploadSuccess(res) {
      this.feedbackForm.imageUrl = res.data
      this.$message.success('上传成功')
    },
    removeImage() {
      this.feedbackForm.imageUrl = ''
    },
    async submitFeedback() {
      try {
        await this.$refs.feedbackForm.validate()
        this.submitting = true
        await request.post('/api/feedbacks', this.feedbackForm)
        this.$message.success('反馈提交成功')
        this.dialogVisible = false
        this.fetchFeedbacks()
      } catch (error) {
        this.$message.error(error.message || '提交失败')
      } finally {
        this.submitting = false
      }
    },
    getStatusType(status) {
      const typeMap = {
        'PENDING': 'warning',
        'REPLIED': 'success',
        'CLOSED': 'info'
      }
      return typeMap[status] || 'info'
    },
    getStatusTagType(status) {
      const typeMap = {
        'PENDING': 'warning',
        'REPLIED': 'success',
        'CLOSED': 'info'
      }
      return typeMap[status] || 'info'
    },
    getStatusText(status) {
      const textMap = {
        'PENDING': '待处理',
        'REPLIED': '已回复',
        'CLOSED': '已关闭'
      }
      return textMap[status] || status
    }
  }
}
</script>

<style scoped>
.feedback-container {
  padding: 20px;
}

.feedback-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedback-item {
  margin-bottom: 20px;
}

.feedback-content {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.feedback-image {
  max-width: 200px;
  border-radius: 4px;
  margin: 10px 0;
}

.reply-section {
  background: #f8f9fa;
  padding: 15px;
  margin-top: 15px;
  border-radius: 4px;
}

.reply-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #606266;
}

.reply-header i {
  margin-right: 5px;
}

.reply-time {
  margin-left: 10px;
  font-size: 12px;
  color: #909399;
}

.reply-content {
  color: #303133;
  font-size: 14px;
  line-height: 1.6;
}

.feedback-status {
  margin-top: 15px;
  text-align: right;
}

.preview-image {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}

.upload-preview {
  width: 150px;
  height: 150px;
  border-radius: 4px;
}

.el-icon-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
  color: #F56C6C;
  cursor: pointer;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  padding: 5px;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 30px 0;
}
</style> 